﻿<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>box-shadow设置单边阴影效果</title>
  <style type="text/css">
    .box-shadow {
      width: 200px;
      height: 100px;
      border-radius: 5px;
      border: 1px solid #ccc;
      margin: 20px;
    }
    .top {
      box-shadow: 0 -4px 5px -3px red;
    }
    .right {
      box-shadow: 4px 0 5px -3px green;
    }
    .bottom {
      box-shadow: 0 4px 5px -3px blue;
    }
    .left {
      box-shadow: -4px 0 5px -3px orange;
    }
  </style>
</head>
<body>
	<div class="box-shadow top"></div>
	<div class="box-shadow right"></div>
	<div class="box-shadow bottom"></div>
	<div class="box-shadow left"></div>
</body>
</html>